<template>
    <div class="common">
        <p>创建的歌单</p>
        <ul>
            <li v-for="(lists, index) of getMusic2.playlist.slice(1, getMusic2.subcount.createdPlaylistCount)" :key="lists"
                @click="goToMyLists(lists, index)">
                {{ lists.name }}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { getMusic } from '@/stores/getMusic'

const router = useRouter()
const getMusic2 = getMusic()

const goToMyLists = (lists: any, index: number) => {
    router.push({
        name: 'createMusicLists',
        params: {
            coverImgUrl: lists.coverImgUrl,
            name: lists.name,
            id: lists.id
        },
        query: {
            id: lists.id,
            i: 1 + index,
            k: lists.name
        }
    })
}
</script>